<template>
  <div>
    <a-upload
      :action="action"
      list-type="picture-card"
      :file-list="fileList"
      :before-upload="beforeUpload"
      @preview="handlePreview"
      @change="handleChange"
      :headers="headers"
      :data='uploaddata'
    >
      <div v-if="fileList.length < num">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          上传图片
        </div>
      </div>
    </a-upload>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
    >
      <img
        alt="example"
        style="width: 100%"
        :src="previewImage"
      />
    </a-modal>
  </div>
</template>

<script>
import storage from "store";
export default {
  data() {
    return {
      action: `${process.env.VUE_APP_API_BASE_URL}/cms/file/uploadImage`,
      fileList: [],
      previewVisible: false,
      previewImage: "",
      headers: {
        authorization: "authorization-text",
        tokenId: storage.get("Access-Token"),
      },
      uploaddata: {
        type: 0,
      },
      number: 8,
    };
  },
  // props:['file','num'],
  props: {
    file: {
      type: Array,
      default: () => {
        return [];
      },
    },
    num: {
      type: Number,
      default: () => {
        return 8;
      },
    },
  },
  created() {
    console.log(this.fileList);
    if (this.file.length != 0) {
      this.fileList = this.file;
      this.fileList[0].uid = 1;
      console.log(this.fileList);
    }
    if (this.num) {
      this.number = this.num;
    }
  },
  methods: {
    beforeUpload(file) {
      console.log("file.type", file.type);
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type == "image/svg+xml";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpeg、png、svg、jpg类型的图片");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("只能上传2M大小的图片");
      }
      console.log(isJpgOrPng, isLt2M);
      return isJpgOrPng && isLt2M;
    },
    async handlePreview(file) {
      console.log(file);
      this.previewImage = file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange(info) {
      if (
        info.file.status === "done" ||
        info.file.status === "uploading" ||
        info.file.status === "removed"
      ) {
        this.fileList = info.fileList;
        this.$emit("returndata", this.fileList);
      } else if (info.file.status === "error") {
        this.$message.error("上传失败");
      }

      console.log(info.file.response);
      if (info.file.response) {
        if (info.file.response.code == 100003) {
          this.$message.error(response.data.msg);
          setTimeout(() => {
            storage.remove("Access-Token");
            storage.remove("User-Info");
            window.location.href = "/user/login";
          }, 2000);
        } else if (
          info.file.response.code != 0 &&
          info.file.response.code != 100003
        ) {
          this.fileList = [];
          this.$message.error(response.data.msg);
        }
      }
      console.log(info);
    },
    handleCancel() {
      this.previewVisible = false;
    },
  },
};
</script>

<style>
</style>